<template>
  <div class="sector">
    <h3>添加车辆</h3>
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="车辆型号" prop="model">
        <el-input
          v-model="ruleForm.model"
          placeholder="例:2018 现代伊兰特 白色 1.6L 自动"
        ></el-input>
      </el-form-item>
      
         <el-form-item label="所属用户">
        <el-select v-model="ruleForm.userID" placeholder="请选择用户">
          <template v-for="item in filterUserData">
          <el-option :label="item.account" :value="item._id" ></el-option>
          </template>
          
        </el-select>
      </el-form-item>

      <el-form-item label="车辆号牌" prop="licensePlate">
        <el-input v-model="ruleForm.licensePlate"></el-input>
      </el-form-item>

      <el-form-item label="车型" prop="motorcycleType ">
        <el-select v-model="ruleForm.motorcycleType" placeholder="请选择车型">
          <el-option label="SUV" value="SUV"></el-option>
          <el-option label="轿车" value="轿车"></el-option>
          <el-option label="MPV" value="MPV"></el-option>
        </el-select>
      </el-form-item>

   

      <el-form-item label="座位" prop="seat">
        <el-select v-model="ruleForm.seat" placeholder="请选择座位数">
          <el-option label="4座" value="4"></el-option>
          <el-option label="5座" value="5"></el-option>
          <el-option label="7座" value="7"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="车辆地址" prop="address">
        <el-input v-model="ruleForm.address"></el-input>
      </el-form-item>
      <el-form-item label="车辆评分" prop="value">
        <el-rate
          v-model="ruleForm.value"
          show-score
          text-color="#ff9900"
          score-template="{value}"
        >
        </el-rate>
      </el-form-item>

      <el-form-item label="车辆租金" prop="rent">
        <el-input v-model="ruleForm.rent"></el-input>
      </el-form-item>

      <el-form-item label="车辆图片">
        <!-- 图片上传 -->
         <el-upload class="avatar-uploader" action="http://192.168.7.61:4800/car/uploadImgs" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload" >
                <img v-if="ruleForm.imgs" :src="'http://192.168.7.61:4800/temp/' + ruleForm.imgs"  class="avatar" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
        </el-upload>

        <!-- 图片上传 -->
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')"
          >立即创建</el-button
        >
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
const { mapActions } = createNamespacedHelpers("car");
const { mapMutations } = createNamespacedHelpers("publicStore");
const {
  mapState: _umapState,
  mapActions: _umapActions,
} = createNamespacedHelpers("user");
export default {
  data() {
    return {
      ruleForm: {
        userID: "",
        value: 5,
        model: "2018 现代伊兰特 白色 1.6L 自动",
        motorcycleType: "SUV",
        licensePlate: "川A12345",
        seat: "5座",
        imgs: "",
        address: "四川省成都市武侯区",
        rent: 70,
      },
      rules: {
        model: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          {
            min: 8,
            max: 15,
            message: "长度在 8 到 15 个字符",
            trigger: "blur",
          },
        ],
        licensePlate: [
          { required: true, message: "请输入车牌号码", trigger: "blur" },
          { min: 7, max: 7, message: "长度在7个个字符", trigger: "blur" },
        ],
        region: [
          { required: true, message: "请选择活动区域", trigger: "change" },
        ],
      },
    };
  },

  created() {
    this.getAllUsers();
  },

  methods: {
    ...mapActions(["addCar"]),
    ..._umapActions(["getAllUsers", "getUserByID"]),
    async submitForm() {
      const { data } = await this.addCar(this.ruleForm);
      console.log(this.ruleForm);
      console.log(data, 123);
      if (data.status) {
        this.$notify({
          title: "提示",
          message: data.msg,
        });
      } else {
        this.$notify({
          title: "提示",
          message: data.msg,
        });
      }
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    //头像上传相关操作
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      // console.log(res);
      if (res.status) {
        this.ruleForm.imgs = res.data;
        // console.log(this.form.avatarImg);
      }
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
  },
  computed: {
    ..._umapState(["userData"]),
    filterUserData() {
      return this.userData.gotUsers.filter((item, index) => {
        return item.role == 2;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.sector {
  width: 98%;
  box-shadow: 0px 2px 4px 0px #2233;
  background-color: #fff;
  margin: 0px auto;
  padding: 20px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  .demo-ruleForm {
    width: 400px;
  }
  .el-rate {
    height: 40px;
    display: flex;
    align-items: center;
  }
}
</style>